	<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部 -->
			<cu-custom bgColor="bg-rgb" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">扫描制令单上料</block>
			</cu-custom>
			
			<!-- 查询条件 -->
			<view class="fixed" :style="[{top:CustomBar + 'px'}]">
				<view class="bg-white nav text-center">
					<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
					:data-id="index">
						{{tabNav[index]}}
					</view>
				</view>
				<form>
					<view class="cu-form-group">
						<view class="title">扫描二维码：</view>
						<input :focus="focus_index === 0" @focus="replaceInput(0,$event)" placeholder="请扫描二维码" name="input" v-model="myFormData.oddNumber" @confirm="inputQuery(0,$event)" :key="TabCur"></input>
					</view>
					<view class="cu-form-group" v-if="TabCur == 1 && produceGrade === 'SMT'">
						<view class="title">扫描FEEDER：</view>
						<input :focus="focus_index === 1" @focus="replaceInput(1,$event)" placeholder="请扫描FEEDER" name="input" v-model="myFormData.feeder" @confirm="handleModal(1,$event)"></input>
						<view class="timeout">{{timeNum}}</view>
					</view>
					<view class="cu-form-group" v-if="TabCur == 1">
						<view class="title">通道：</view>
						<input :focus="focus_index === 2" @focus="replaceInput(2,$event)" placeholder="请扫描通道" name="input" v-model="myFormData.passage" @confirm="handleModal(2,$event)"></input>
					</view>

				</form>
			</view>
			<view class="list" :style="style">
				<view class="card animation-slide-bottom" v-for="(item,index) in list" :key="index" :style="[{animationDelay: (index + 1)*0.1 + 's'}]">
					<view class="top">
						<view>物料编号：<text style="color: red;">{{item.productCode}}</text></view>
						<view style="background-color:#1CBBB4;color: white;padding: 10rpx;border-radius: 10rpx;">{{item.inwareNum}}</view>
					</view>
					<view class="bottom">
						<view class="box">
							<view class="lable">
								创建时间:
							</view>
							<view class="content">
								{{item.createTime}}
							</view>
						</view>
						<view class="box">
							<view class="lable">
								名称:
							</view>
							<view class="content">
								{{item.productName}}
							</view>
						</view>
						<view class="box" v-if="item.query5">
							<view class="lable">
								备注:
							</view>
							<view class="content">
								{{item.query5}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 弹出层 -->
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">扫描上料</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl modalContent">
					<template v-if="TabCur=== 0">
						<view class="cu-bar">
							料号:<text>{{curData.materielCode}}</text>
						</view>
						<view class="cu-bar">
							名称:<text>{{curData.materielName}}</text>
						</view>
						<view class="cu-bar">
							规格:<text>{{curData.materielGague}}</text>
						</view>
						<view class="cu-bar">
							需求数量:<text>{{bomObj.realNum}}</text>
						</view>
						<view class="cu-bar">
							已发料数量:<text>{{bomObj.deliveryNum}}</text>
						</view>
						<view class="cu-bar">
							已上料数量:<text>{{bomObj.unglazeNum}}</text>
						</view>
					</template>
					<template v-else>
						<view class="cu-bar">
							料号:<text>{{curData.materielCode}}</text>
						</view>
						<view class="cu-bar">
							名称:<text>{{curData.materielName}}</text>
						</view>
						<view class="cu-bar">
							规格:<text>{{curData.materielGague}}</text>
						</view>
						<view class="cu-bar">
							区位:<text>{{curData.materielTable}}</text>
						</view>
						<view class="cu-bar">
							料站:<text>{{curData.materielStation}}</text>
						</view>
						<view class="cu-bar">
							通道:<text>{{curData.passage}}</text>
						</view>
						<view class="cu-bar">
							点位:<text>{{curData.pointLocation}}</text>
						</view>
						<view class="cu-bar">
							点数:<text>{{curData.pointNum}}</text>
						</view>
		
					</template>
		
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="handleModal" :disabled="modalLoading">确定</button>
		
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'instructionSheetLoadingDetailSaoMiao',
		computed: {
			style() {
				var CustomBar= this.CustomBar;
				var _top = this.TabCur === 0 ? CustomBar + 60 : CustomBar + 160
				var style = `margin-top:${_top}px;`;
				return style
			}
		},
		data() {
			return {
				produceGrade: '',
				modalName: null,
				CustomBar: this.CustomBar,
				TabCur: 0,
				tabNav: ['无通道扫描', '有通道扫描'],
				id: '', //物料凭证项目ID
				baseCode: '',
				myFormData: {
					feeder: '',
					oddNumber: '',
					passage: '',
					materielTable:''
				},
				list: [],
				mesStorageWholesaleInfo:{},
				focus_index: 0,
				bomObj: {
					realNum: '',
					deliveryNum: '',
					unglazeNum: ''
				},
				curData: {
					materielCode: '',
					materielName: '',
					materielGague: '',
					materielTable: '',
					materielStation: '',
					passage: '',
					pointLocation: '',
					pointNum: ''
				},
				modalLoading: false,
				canPost: true,
				timeNum:20,
				interval:null,
			}
		},
		onLoad(e) {
			// this.id = uni.getStorageSync('instructionSheetLoadingDetailId');
			// this.getMesStorageWholesaleList();
			this.baseCode = uni.getStorageSync('instructionSheetLoadingDetailBaseCode');
			this.productCode = uni.getStorageSync('instructionSheetLoadingDetailProductCode');
			this.produceGrade = uni.getStorageSync('instructionSheetLoadingProduceGrade');
			this.addPost = this.debounce(function() {
				console.log('onload>>')

				this.canPost && this.addVoucher(this.mesStorageWholesaleInfo)
			}, 20000)
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.focus_index = 0
				this.hideModal()
				this.myFormData.oddNumber = ''
			},
			replaceInput(index) {
				this.focus_index = index
			},
			hideModal(e) {
				this.modalName = null
				this.focus_index = 0
			},
			// 添加物料记录
			addVoucher(item) {
				this.modalLoading = true
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				let data = {
					mobileCode: '264',
					materielCode:item.productCode,
					mobileType:'制令单扫描上料',
					perkId: uni.getStorageSync('instructionSheetLoadingDetailRise'),
					reserveCode: this.bomObj.id,
					inputNum: this.bomObj.num,
					productName: item.productName,
					wareCode: item.wareCode,
					wareSite: item.wareSite,
					unit: item.unit,
					query1: item.query1,
					query2: item.query2,
					query5: uni.getStorageSync('instructionSheetLoadingId'),
					batchNum: item.batchNum,
					shelfCode: item.shelfCode,
					shelfState: item.shelfState,
					clientCode: item.clientCode
				}
				// this.$http.post('storage/mesCertificatePerk/addMesCertificateItem',data).then( res =>{
				this.$http.post('storage/mesCertificatePerk/scanSendMateriel2',data).then( res =>{
					uni.hideLoading()
					this.canPost = false;
					if(res.data.success){
						this.id = res.data.result.id
						this.getMesStorageWholesaleAdd(res.data.result.reserveCode)
						this.modalLoading = false
						this.hideModal()
					}else {
						// this.$tip.error(res.data.message)
						this.modal.show({ type:'error', content:res.data.message,timeout:5000 })
						this.modalLoading = false
						this.hideModal()
						this.myFormData =  {
							feeder: '',
							oddNumber: '',
							passage: '',
							materielTable:''
						}
					}
				})
			},
			// 列表查询
			getMesStorageWholesaleList(){
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				let data = {
					pageNo: 1,
					pageSize: 10000,
					baseRownum:this.id
				}
				this.$http.get('storage/mesStorageWholesale/list', {
					params: data
				}).then(res => {
					uni.hideLoading()
					console.log("res1::", res)
					if (res.data.success) {
						this.list = res.data.result.records;
					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({ type:'error', content:res.data.message })
					}
				})
			},
			handleModal(index,e) {
				this.focus_index++
				if (this.focus_index > 2) {
					this.focus_index = 0
				}
				let {oddNumber, feeder, passage} = this.myFormData;
				if (oddNumber.trim().length === 0) {
					// this.modal.show({ type:'error', content:'请扫描二维码' })
					this.modalName = null
					this.focus_index = 0
					return
				}
				if (this.curData.length === 0) {
					this.modal.show({ type:'error', content:'在线料表中没有该物料，请检查' })
					this.modalName = null
					return
				}
				if(this.TabCur === 0) {
					this.addVoucher(this.mesStorageWholesaleInfo)
					return
				}

				if (feeder.trim().length === 0 && this.produceGrade === 'SMT') {
					// this.modal.show({ type:'error', content:'请扫描feeder' })
					this.modalName = null
					this.focus_index = 1
					return;
				}
				if (passage.trim().length === 0) {
					// this.modal.show({ type:'error', content:'请扫描通道' })
					this.modalName = null
					this.focus_index = 2
					return;
				}
				this.addVoucher(this.mesStorageWholesaleInfo)
			},
			// 扫码查询
			inputQuery(index, e) {
				let {oddNumber, feeder, passage} = this.myFormData;
				if (oddNumber.trim().length === 0) {
					this.modal.show({ type:'error', content:'请扫描二维码' })
					return
				}
				let params = {
					id: this.baseCode,
					wareId: this.myFormData.oddNumber
				}
				let _this = this
				this.$http.get('/produce/mesCommandbillInfo/getOnlineMaterirlById', {
					params
				}).then(res => {
					if(res.data.success) {
						let datas = {
							id: this.myFormData.oddNumber,
							type:'上料'
						}
						let materirDatas = res.data.result
						this.$http.get('/storage/mesStorageWholesale/queryById', {
							params:datas
						}).then(res => {
							if(res.data.success){
								this.mesStorageWholesaleInfo = res.data.result
								let data = res.data.result
								let listBomRes = uni.getStorageSync('instructionSheetLoadingDetailListBomRes')
								let curBomData = listBomRes.filter(item => {
									return item.materielCode === data.productCode
								})
								let curData = materirDatas.filter(item => {
									return item.materielCode === data.productCode
								})
								curBomData = curBomData.length > 0 ? curBomData[0]: []
								curData = curData.length > 0 ? curData[0]: []
								this.bomObj = curBomData
								this.curData = curData

								console.log('cur',curBomData)
								this.focus_index = null
								this.$nextTick(()=>{
									this.modalName = 'DialogModal'
								})

							} else {
								// this.$tip.error(res.data.message)
								this.myFormData.oddNumber = ''
								this.modal.show({ type:'error', content:res.data.message,timeout:5000, })
							}
						})

					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({ type:'error', content:res.data.message,timeout:5000, })
						this.myFormData =  {
							feeder: '',
							oddNumber: '',
							passage: '',
							materielTable:''
						}
					}
				})

			},

			// 添加
			getMesStorageWholesaleAdd(reserveCode) {
				console.log(this.mesStorageWholesaleInfo)
				uni.showLoading({
					mask: true,
					title: '添加中.....'
				})
				let data = {}
				data.baseDockettype = '扫描上料';
				data.productCode = this.mesStorageWholesaleInfo.productCode;
				data.baseCode = reserveCode;
				data.glazeId = this.myFormData.oddNumber;
				// data.id = '';
				data.baseRownum = this.id;
				// data.createBy = "";
				data.inwareNum = this.mesStorageWholesaleInfo.inwareNum;
				data.wareCode = this.materielTable;
				data.query2 = this.TabCur === 0 ? '无feeder' :this.myFormData.feeder;
				data.wareSite = this.TabCur === 0 ? '无通道' : this.myFormData.passage;

				this.$http.post('storage/mesStorageWholesale/add', data).then(res => {
					console.log("res3::", res)
					uni.hideLoading()
					this.canPost = false;
					if (res.data.success) {
						// this.$tip.success(res.data.message)
						this.modal.show({ type:'success', content:res.data.message })
						this.myFormData = {
							feeder: '',
							oddNumber: '',
							passage: '',
							materielTable:''
						},
						this.focus_index = 0
						this.hideModal()
						this.getMesStorageWholesaleList()
					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({ type:'error', content:res.data.message })
						this.myFormData = {
							feeder: '',
							oddNumber: '',
							passage: '',
							materielTable:''
						}
						this.focus_index = 0
					}
				})
			},
			debounce(fn, wait, immediat) {
				console.log('debounce>>')
				let timeout = null
				return function () {
						if (timeout) clearTimeout(timeout)
						if (immediat) {
								let callNow = !timeout
								timeout = setTimeout(function () {
										timeout = null
								}, wait)
								if (callNow) fn.apply(this, arguments)
						} else {
								clearInterval(this.interval)
								this.timeNum = 20
								this.interval = setInterval(()=>{
									if(this.timeNum === 0){
										clearInterval(this.interval)
									}else{
										this.timeNum = this.timeNum - 1
									}
								},1000)
								timeout = setTimeout(() => {
										fn.apply(this, arguments)
								}, wait)
						}
				}
			}
		},
		watch: {
			'myFormData.feeder': function (newQuestion, oldQuestion) {
				newQuestion.trim().length > 0 && this.addPost()
			}
		}
	}
</script>

<style lang="less">
	input {
		border: 2rpx solid #F0F0F0;
		height: 60rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.fixed {
		position: fixed;
		z-index: 1;
		width: 100%;
		background-color: white;
		// height: 100rpx;
		border-bottom: 1rpx solid #eee;
	}

	.list {
		margin-top: 300rpx;
	}

	.card {
		margin: 30rpx;
		box-shadow: 0px 0px 5rpx 2rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 30rpx;
		background-color: white;
	}

	.card .top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F0F0F0;
		padding-bottom: 20rpx;
		font-weight: bold;
	}

	.card .bottom .box {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.card .bottom .box .lable {
		width: 25%;
	}

	.card .bottom .box .content {
		width: 74%;
		text-align: right;
	}

	.title {
		width: 37%;
	}
	.modalContent .cu-bar {
		min-height: 28px;
	}
	.timeout {
		width: 20px;
		height: 20px;
		// border-radius: 50%;
		// background-color: #1CBBB4;
		margin-left: 5px;
	}

	// .uni-modal .uni-modal__bd {
	// 	width: 70% !important;
	// 	margin: auto !important;
	// 	text-align: left !important;
	// }
</style>
